<template>
  <div id="teamTrainingEacht" ref="teamTrainingEacht" class="tt-eacht"></div>
</template>

<script>
export default {
  props: {
    eachtData: {},
  },
  data() {
    return {};
  },
  components: {},
  mounted() {
    // this.echartsInit();
  },
  beforeDestroy() {},
  methods: {
    echartsInit() {
      var that = this;
      var nameArr = this.eachtData.nameArr;
      // [
      //   "政务服务",
      //   "市场监管",
      //   "打假打私",
      //   "内部监管",
      //   "卷烟鉴别",
      //   "信息化技能",
      //   "综合管理",
      //   "其他主题",
      // ];
      var vauleArr = this.eachtData.vauleArr;
      // [87, 132, 158, 103, 56, 20, 18, 12];
      var option = {
        title: {
          left: "5%",
          top: "5%",
          textStyle: {
            color: "#666",
            fontSize: "18px",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (value) {
            return value[0].data+" 次";
          }
        },
        grid: {
          top: "20%",
          right: "3%",
          left: "10%",
          bottom: "30%",
        },

        xAxis: [
          {
            type: "category",
            data: nameArr,
            axisLine: {
              show: true,
            },

            axisTick: {
              show: true,
            },
            axisLabel: {
              formatter: function (value) {
                var ret = ""; //拼接加\n返回的类目项
                var max = 2; //每行显示的文字字数
                var val = value.length; //X轴内容的文字字数
                var rowN = Math.ceil(val / max); //需要换的行数
                if (rowN > 1) {
                  //判断 如果字数大于2就换行
                  for (var i = 0; i < rowN; i++) {
                    var temp = ""; //每次截取的字符串
                    var start = i * max; //开始截取的位置
                    if (val > 4) {
                      start = i * 3;
                    }
                    var end = start + max; //结束截取的位置
                    temp = value.substring(start, end) + "\n";
                    ret += temp; //最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              },
              color: "rgba(255,255,255,0.7)",
              fontSize: 12,
              fontFamily: "SourceHanSansCN",
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            splitNumber: 3,
            scale: true,
            name:"场次",
            axisLabel: {
              formatter: function (value) {
                let val = value;
                if (value == 0) {
                  val = "";
                }
                return val;
              },
              color: "#818FA0",
              textStyle: {
                fontSize: 12,
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            // 基准线
            splitLine: {
              show: true,
              lineStyle: {
                width: 0.5,
                type: "dotted",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: vauleArr,

            barWidth: "10px",

            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#3cb7cf" },
                  { offset: 0.5, color: "#37a4c1" },
                  { offset: 1, color: "#3cb7cf" },
                ]),
                // barBorderRadius: [5, 5, 0, 0],
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 12,
                formatter: "{c}",
                position: "top",
                right: 0,
                textStyle: {
                  color: "#3cb7cf",
                  fontSize: 12,
                },
              },
            },
          },
        ],
      };

      this.$echarts.init(this.$refs.teamTrainingEacht).setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.tt-eacht {
  width: 100%;
  height: 100%;
}
</style>
